<script setup lang="ts">
import ChartLhz from "@/components/ChartLhz.vue";
import {computed} from "vue";

const props = defineProps(['chart_option'])
const {chart_option} = props;
const line_option = computed(() => {
  let option: any = {
    baseOption: {
      timeline: {
        width: '80%',
        left: 'center',
        axisType: 'category',
        realtime: true,
        loop: true,
        autoPlay: true,
        playInterval: 1000,
        controlStyle: {
          position: 'left'
        },
        data: [],
      },
      xAxis: {
        // 坐标轴类型。 category 类目轴
        type: 'category',
        // 数据
        data: [],
        axisLabel: {
          show: true,
          color: '#ffffff',
          fontSize: 16,
          interval: 0,

        },
      },
      yAxis: {
        // value 值轴
        type: 'value',
        axisLabel: {
          show: true,
          color: '#ffffff',
          fontSize: 16,
        },
      },
      // 值轴数据
      series: [
        {
          name: "污染物AQI",
          type: "pie",
          center: ['50%', '50%'],
          radius: '50%'
        }
      ]
    },
    options: []
  };
  let year_list = chart_option.shift()
  option.baseOption.timeline.data = year_list;
  option.baseOption.xAxis.data = chart_option.pop();
  for (let i = 0; i < chart_option.length; i++) {
    option.options.push({
      title: {
        text: year_list[i] + '空气污染物比例',
        left: 'center',
        textStyle: {
          // 主标题文字的颜色。
          color: '#FF6060'
        },
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'horizontal',
        left: 'center',
        top: 30,
        textStyle: {
          color: '#fff'
        }
      },
      series: [
        {data: chart_option[i]}
      ]
    });
  }
  return option;
});
</script>

<template>
  <chart-lhz :chart_option="line_option" v-if="chart_option"/>
</template>

<style scoped lang="scss">

</style>